<template>
  <div class="alert">
      <div class="alert-cont" v-for="item in alerts" :key="item.id">
          <span class="alert-c">
              {{item.content}}
          </span>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      alerts: []
    }
  },
  created () {
    this.id = 0
  },
  methods: {
    add (option) {
      const id = 'id_' + (this.id++)
      const _alert = { id: id, ...option }
      this.alerts.push(_alert)
      const duration = option.duration
      setTimeout(() => {
        this.del(id)
      }, duration * 1000)
    },
    del (id) {
      for (let i = 0; i < this.alerts.length; i++) {
        if (this.alerts[i].id === id) {
          this.alerts.splice(i, 1)
          break
        }
      }
    }
  }
}

</script>
<style lang="stylus" scoped>
.alert
  position fixed
  top 50%
  width 100%
  text-align center
  color #fff
  margin-top 20px
  .alert-cont
    display block
    margin-bottom 10px
    line-height 40px
    .alert-c
      padding 0 8px
      background #000
</style>
